<template>
  <div>
    <Card>
      <p slot="title">
        <!-- <Icon type="ios-film-outline"></Icon> -->
        产品列表
      </p>
      <a href="#" slot="extra" @click.prevent="toAddPage">
        <Icon type="ios-loop-strong"></Icon>产品添加
      </a>
      <tables
        ref="tables"
        editable
        searchable
        search-place="top"
        v-model="tableData"
        :columns="proLiatColumns"
        @on-delete="handleDelete"
      />
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
    </Card>
  </div>
</template>

<script>
import Tables from "_c/tables";
import { getTableData } from "@/api/data";
import { getProList, proDelete } from "@/api/product";
export default {
  name: "pro_list_page",
  components: {
    Tables
  },
  data() {
    return {
      proLiatColumns: [
        {
          title: "产品名称",
          key: "proName",
          sortable: true
        },
        {
          title: "图标",
          key: "icon",
          sortable: true,
          render: (h, params) => {
            return h("div", [
              h("img", {
                attrs: {
                  src: params.row.icon
                },
                style:{
                  maxWidth:'200px',
                  maxHeight:'100px'
                }
              }),

            ]);
          }
        },
        {
          title: "缩略图",
          key: "cover",
          sortable: true,
          render: (h, params) => {
            return h("div", [
              h("img", {
                attrs: {
                  src: params.row.cover
                },
                style:{
                  maxWidth:'200px',
                  maxHeight:'100px'
                }
              }),

            ]);
          }
        },
        {
          title: "发布日期",
          key: "pubdate",
          sortable: true
        },
        {
          title: "项目链接",
          key: "externalLinks",
          sortable: true
        },
        {
          title: "摘要",
          key: "abstract",
          sortable: true
        },
         {
          title: "操作",
          key: "handle",
          options: ["delete"],
          button: [
            (h, params, vm) => {
              return h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: "你确定要删除吗?"
                  },
                  on: {
                    "on-ok": () => {
                      vm.$emit("on-delete", params);


                    }
                  }
                },
                // [h("Button", "自定义删除")]1·
              );
            }
          ]
        }
      ],
      columns: [
        { title: "Name", key: "name", sortable: true },
        { title: "Email", key: "email", editable: true },
        { title: "Create-Time", key: "createTime" },
        {
          title: "Handle",
          key: "handle",
          options: ["delete"],
          button: [
            (h, params, vm) => {
              return h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: "你确定要删除吗?"
                  },
                  on: {
                    "on-ok": () => {
                      vm.$emit("on-delete", params);
                      console.log('删除测试')
                      vm.$emit(
                        "input",
                        params.tableData.filter(
                          (item, index) => index !== params.row.initRowIndex
                        )
                      );
                    }
                  }
                },
                [h("Button", "自定义删除")]
              );
            }
          ]
        }
      ],
      tableData: []
    };
  },
  methods: {
    handleDelete(params) {
      console.log(params);
      proDelete( params.row.id).then(res => {
        if (res.data.msg === 0 || res.data.msg === '0') {
          // vm.$emit(
          //   "input",
          //   params.tableData.filter(
          //     (item, index) => index !== params.row.initRowIndex
          //   )
          // );
        }
      })
    },
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`
      });
    },
    /**
     * 跳转到添加页面
     */
    toAddPage() {
      const route = {
        name: "MyProAdd",
        meta: {
          title: `动态路由`
        }
      };
      this.$router.push(route);
    }
  },
  mounted() {
    // getTableData().then(res => {
    //   this.tableData = res.data;
    // });
    getProList({ page: 1 }).then(res => {
      console.log(res);
      this.tableData = res.data.list.data;
    });
  }
};
</script>

<style>
</style>
